const EducationTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>学历报考信息</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" :rules="rules" label-width="117px" size="small">
    <el-row>
      <el-col :span="8">
        <el-form-item prop="pathLabel" label="学习形式">
        <el-select v-model="formData.pathLabel" placeholder="请选择" @change="handleModeChange">
          <el-option v-for="item in modeList" :key="item.id" :label="item.mode" :value="item.mode"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="levelLabel" label="学历层次">
        <el-select v-model="formData.levelLabel" placeholder="请选择" @change="handleLevelChange">
          <el-option v-for="item in levelList" :key="item.id" :label="item.educationName" :value="item.educationName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="schoolLabel" label="学校">
        <el-select v-model="formData.schoolLabel" placeholder="请选择" @change="handleSchoolChange">
          <el-option v-for="item in schoolList" :key="item.id" :label="item.schoolName" :value="item.schoolName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="discipline" label="报考专业">
        <el-select v-model="formData.discipline" placeholder="请选择">
          <el-option v-for="item in courseList" :key="item.id" :label="item.courseName" :value="item.courseName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="batch" label="批次">
        <el-select v-model="formData.batch" placeholder="请选择">
          <el-option v-for="item in batchList" :key="item.id" :label="item.batch" :value="item.batch"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
  </el-card>
`;

Vue.component("app-education", {
  props: ["level-list", 'type'],
  name: "app-education",
  template: EducationTemplate,
  mounted() {
    this.getModeList();
  },
  data() {
    return {
      rules: {
        pathLabel: [
          {
            required: true,
            message: '请选择学习形式',
          }
        ],
        levelLabel: [
          {
            required: true,
            message: '请选择学历层次',
          }
        ],
        schoolLabel: [
          {
            required: true,
            message: '请选择学校',
          }
        ],
        discipline: [
          {
            required: true,
            message: '请选择报考专业',
          }
        ],
        batch: [
          {
            required: true,
            message: '请选择批次',
          }
        ],
      },
      modeList: [],
      schoolList: [],
      courseList: [],
      batchList: [],
      formData: {
        pathLabel: '',
        // level: "",
        levelLabel: '',
        // school: "",
        schoolLabel: '',
        discipline: "",
        batch: "",
      },
    };
  },
  computed: {
    isDisable() {
      return this.type === 'look';
    },
  },
  methods: {
    handleLevelChange(value) {
      // this.formData.levelLabel = this.levelList.find(item => item.id === value).educationName;
      const id = this.levelList.find(item => item.educationName === value).id;
      $.ajax({
        url: baseUrl + "education/querySchoolList",
        method: "Post",
        data: "educationId=" + id,
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.schoolList = data;
        },
      });
    },
    handleSchoolChange(value) {
      // this.formData.schoolLabel = this.schoolList.find(item => item.id === value).schoolName;
      const id = this.schoolList.find(item => item.schoolName === value).id;
      $.ajax({
        url: baseUrl + "education/queryCourseList",
        method: "Post",
        data: "schoolId=" + id,
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.courseList = data;
        },
      });
    },
    handleModeChange(value) {
      // this.formData.pathLabel = this.modeList.find(item => item.id === value).mode;
      const id = this.modeList.find(item => item.mode === value).id;
      $.ajax({
        url: baseUrl + "education/queryBatchList",
        method: "Post",
        data: {
          pid: id,
          trainType: "education",
        },
        success: (data) => {
          this.batchList = data;
        },
      });
    },
    getModeList() {
      $.ajax({
        url: baseUrl + "education/queryModeList",
        async: false,
        method: "Post",
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.modeList = data;
        },
      });
    },
  },
});
